<!-- //项目用到vant-ui库 -->

<template>
  <div class="tree-item">
    <div style="font-size:15px">
      <span @click="titleNodeClick(1)" :class="curNameKey==='/ReportFile'?'active':''"> 报表文件目录</span>
      <span>
        <!-- //vant组件库图标 看个人需求换成自己需要的 -->
        <!--  // 加一个延迟动画效果  'fc-theme': item.key == curNameKey-->
        <van-icon
          :name="iconName"
          style="transition: transform 0.3"
          :class="{
            'negative-rotate': isOpen(1)
          }"
        />
        <!-- // 根据id判断是否旋转图标和添加激活样式 -->
      </span>
    </div>
    <div v-if="isShow && treeData.length !== 0">
      <div style="padding:10px" v-for="item in treeData" :key="item.key">
        <div class="item-title">
          <!-- // fc-theme激活样式的类名 -->
          <span
            @click="itemNodeClick(item)"
            class="theme"
            :class="{ 'fc-theme': item.key == curNameKey }"
            v-text="item.title"
          >
          </span>
          <span v-if="item.children && item.children.length">
            <!-- //vant组件库图标 看个人需求换成自己需要的 -->
            <!--  // 加一个延迟动画效果 -->
            <van-icon
              name="arrow-down"
              style="transition: transform 0.3s"
              :class="{
                'negative-rotate': isOpen(item.key),
                'fc-theme': item.key == curNameKey
              }"
            />
            <!-- // 根据id判断是否旋转图标和添加激活样式 -->
          </span>
        </div>
        <div
          v-if="item.children && item.children.length"
          v-show="isOpen(item.key)"
          class="item-childen"
        >
          <!-- //这里是重点:current="curNameId",否则无法实现动态添加激活样式 -->
          <tree-folder
            style="font-size:14px"
            :treeData="item.children"
            :current="curNameKey"
            @tree-node-click="$emit('tree-node-click', $event)"
          >
          </tree-folder>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  name: "TreeFolder",
  components: {
    "van-icon": Icon
  },
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    current: String, //保存当前点击节点的id
    isShow: {
      type: Boolean
    },
    typeTital: Number,
    iconName: {
      type:String,
      default:'arrow-up'
    }  //向上还是向下
  },

  data() {
    return {
      type:this.typeTital,
      // iconNameActive:this.iconName,
      expandedKeys: [], // 当前列表需要展开的节点id组成的数组
      curNameKey: "/ReportFile" //保存current的值
    };
  },
  computed: {
    isOpen() {
      return function(id) {
        // 判断节点id在不在数组中，在则显示，不在则隐藏
        return this.expandedKeys.includes(id);
      };
    }
  },
  watch: {
    //监听当前点击节点的id
    current: {
      handler(num) {
        this.curNameKey = num;
      },
      deep: true,
      immediate: true
    },
    // 监听是否存在数据
    treeData: {
      handler(data) {
        if (data.length == 0) {
           // 如果有数据箭头向下
          this.iconNameActive="arrow-down"
        } else {
          // 如果有数据箭头向上
          this.iconNameActive="arrow-up"
        }
        
      },
      deep: true,
      immediate:true
    }
  },
  methods: {
    titleNodeClick(data) {
      this.$emit('titleNodeClickChange',data)
    },
    itemNodeClick(item) {
      this.$emit("tree-node-click", item);
      if (item.children && item.children.length) {
        let index = this.expandedKeys.indexOf(item.id);
        if (index > -1) {
          // 如果当前节点id存在数组中，则删除
          this.expandedKeys.splice(index, 1);
        } else {
          // 如果当前节点id不存在数组中，则添加
          this.expandedKeys.push(item.id);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.tree-item {
  .theme, .fc-theme, .active{
  
  } 
  .theme{
   
    font-size: 15px;
  }
  .fc-theme{
     color:rgb(6, 91, 248);
    font-weight: bold;
    font-size: 17px;
  }

  .active{
     color:rgb(6, 91, 248);
    font-weight: bold;
    font-size: 17px;
  }
  .item-title {
    padding: 4px 8px;
    font-size: 14px;
  }
  .name {
    color: #000;
  }
  .negative-rotate {
    transform: rotate(-180deg);
  }
  .item-childen {
    padding-left: 20px;
  }
}
</style>
